<template>
  <div id="app">
    <div class="col-3" v-for="(item,index) in list" :key="item.name">
        <h3>{{item.name}}</h3>
        <button @click="add(index)">添加</button>
        <!-- <button @click="del"></button> -->
        <draggable class="list-group" :list="item.children" group="people" >
            <div
            class="list-group-item"
            v-for="(element,ind) in item.children"
            :key="element.name"
            >
            {{ element.name }} 
            <button  @click="delTask({index,ind})">删除</button>
            </div>
        </draggable>
    </div>
    <button @click="newAddstage">新建阶段</button>
    <div class="dialog" v-show="visible">
        <input type="text" v-model="txt">
        <button @click="cur">添加</button>
    </div>
  </div>
</template>

<script>
import draggable from "vuedraggable";
import {mapActions,mapState,mapMutations} from 'vuex';
export default {
    data(){
        return {
            txt:'',
            visible:false,
            taskIndex:-1
        }
    },
    components:{
        draggable
    },
    computed:{
        ...mapState(['list'])
    },
    methods:{
        ...mapActions(['getList']),
        ...mapMutations(['addTask','delTask','newAdd']),
        add(index){
            //1.打开弹窗  //2.编写内容   
            this.visible = true;
            this.taskIndex = index;
        },
        //确认添加
        cur(){
            if(this.taskIndex != -1){
                //添加任务
                 //3.添加
                this.addTask({txt:this.txt,index:this.taskIndex});
                this.taskIndex = -1;
            }else{
                //添加的新的阶段
                this.newAdd(this.txt);
            }
            this.visible = false;
           
        },
        newAddstage(){
            //1.打开弹窗
            this.visible = true;
        }
    },
    created(){
        // this.$store.dispatch('getList');
        this.getList();
    }
}
</script>

<style lang="scss">
    #app{
        display: flex;
    }

    .dialog{
        width:200px;
        height: 200px;
        border:1px solid gray;
        position: absolute;
        top:50%;
        left:50%;
        transform: translate(-50%,-50%);
    }
</style>
